<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css"/>
    <link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css"/>
    <link rel="stylesheet" type="text/css" href="/api-ui/static/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css"/>
    <style type="text/css">
        a {
            color: black;
        }

        a:hover {
            text-decoration: none;
        }

        .bgc-w {
            background-color: #fff;
        }
    </style>
    <!--vue脚本库-->
    <script type="text/javascript"
            src="/api-ui/static/js/vue/vue-3.2.4.global.js">
    </script>
    <!--axios脚本库-->
    <script type="text/javascript"
            src="/api-ui/static/js/vue/axios-0.18.0.min.js">
    </script>
    <!--我们自己封装的axios函数库 -->
    <script type="text/javascript"
            src="/api-ui/static/js/vue/axios-helper.js">
    </script>
</head>

<body id="app" style="background-color: #ecf0f5;">
<div class="row" style="padding-top: 10px;">
    <div class="col-md-2">
        <h1 style="font-size: 24px; margin: 0;" class="">部门管理</h1>
    </div>
    <div class="col-md-10 text-right">
        <a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> >
        <a disabled="disabled">部门管理</a>
    </div>
</div>
<div class="row" style="padding-top: 15px;">
    <div class="col-md-12">
        <!--id="container"-->
        <div class="bgc-w box">
            <form action="" method="post" onsubmit="return check();">
                <input type="hidden" name="xg" value="add"/>
                <!--盒子头-->
                <div class="box-header">
                    <h3 class="box-title">
                        <a href="javascript:history.back();" class="label label-default" style="padding: 5px;">
                            <i class="glyphicon glyphicon-chevron-left"></i> <span>返回</span>
                        </a>
                    </h3>
                </div>
                <!--盒子身体-->
                <div class="box-body no-padding">
                    <div class="box-body">
                        <div class="alert alert-danger alert-dismissable" role="alert"
                             style="display: none;">
                            错误信息:
                            <button class="close thisclose" type="button">&times;</button>
                            <span class="error-mess"></span>
                        </div>
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label class="control-label"><span>名称</span></label>
                                <input name="deptName" class="form-control" value="" v-model="AoaDept.deptName"/>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="control-label"><span>电话</span></label>
                                <input name="deptTel" class="form-control" value="" v-model="AoaDept.deptTel"/>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="control-label"><span>传真</span></label>
                                <input name="deptFax" class="form-control" value="" v-model="AoaDept.deptFax"/>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="control-label"><span>邮箱</span></label>
                                <input name="email" class="form-control" value="" v-model="AoaDept.email"/>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="control-label"><span>地址</span></label>
                                <input name="deptAddr" class="form-control" value="" v-model="AoaDept.deptAddr"/>
                            </div>
                            <input type="hidden" name="deptId" value="">
                        </div>
                    </div>

                </div>
                <!--盒子尾-->
                <div class="box-footer">
                    <button class="btn btn-primary" id="save" @click="save" type="button"/>保存
                    <button class="btn btn-default" id="cancel" type="button"
                            onclick="window.history.back();"/>取消
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script type="module">
    Vue.createApp({
        data() {
            return {
                //用户保存查询得到的角色列表
                AoaDept:{
                    deptId:null,
                    deptAddr:null,
                    deptFax:null,
                    deptName:null,
                    deptTel:null,
                    email:null,
                    deptmanager:null,
                    endTime:null,
                    startTime:null
                }
            }
        },
        created() {

        },
        methods: {
            save(){
                console.log("开始进入了");
                //提示框可能在提交之前是block状态，所以在这之前要设置成none
                $('.alert-danger').css('display', 'none');
                let valid = true;
                $('.form-control').each(function (index) {
                    // 如果在这些input框中，判断是否能够为空
                    if ($(this).val() == "") {
                        // 获取到input框的兄弟的文本信息，并对应提醒；
                        let brother = $(this).siblings('.control-label').text();
                        let errorMess = "[" + brother + "输入框信息不能为空]";
                        // 对齐设置错误信息提醒；红色边框
                        $(this).parent().addClass("has-error has-feedback");
                        $('.alert-danger').css('display', 'block');
                        // 提示框的错误信息显示
                        $('.error-mess').text(errorMess);
                        // 模态框的错误信息显示
                        $('.modal-error-mess').text(errorMess);
                        valid = false;
                        return false;
                    }else {
                        return true;
                    }
                });
                if(!valid){
                    //校验不通过
                    return ;
                }
                requestPost("/api-core/aoaDept/save",this.AoaDept).then((data)=>{
                    console.info(data);
                    if(data){
                        alert("添加成功");
                        window.location.href="/api-ui/page/deptmanage.html";
                    }else{
                        alert("添加失败");
                    }
                })

            }

        }
    }).mount("#app");
</script>
<style type="text/css">
    #thismodal .modal-dialog {
        width: 500px;
        top: 20%;
    }

    #thismodal .modal-body .icon {
        height: 80px;
        width: 80px;
        margin: 20px auto;
        border-radius: 50%;
        color: #aad6aa;
        border: 3px solid #d9ead9;
        text-align: center;
        font-size: 44px;
    }

    #thismodal .modal-body .icon .glyphicon {
        font-size: 46px;
        top: 14px;
    }

    #thismodal .modal-p {
        margin: 20px auto;
    }

    #thismodal .modal-body .modal-p h2 {
        text-align: center;
    }

    #thismodal .modal-body .modal-p p {
        text-align: center;
        color: #666;
        font-size: 16px;
        padding-top: 8px;
        font-weight: 300;
    }

    #thismodal .modal-p .btn {
        margin-left: 40%;
        width: 100px;
        height: 40px;
    }

    #thismodal .modal-error .icon {
        color: #f27474;
        border: 3px solid #f27474;
    }
</style>

<div class="modal fade in" id="thismodal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body modal-success" style="display: none;">
                <div class="icon">
                    <span class="glyphicon glyphicon-ok"></span>
                </div>
                <div class="modal-p">
                    <h2>操作成功</h2>
                    <!--<p style="">已回复</p>-->
                    <div class="modal-p">
                        <button type="button" class="btn btn-primary successToUrl" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
            <div class="modal-body modal-error" style="display: none;">
                <div class="icon">
                    <span class="glyphicon glyphicon-remove"></span>
                </div>
                <div class="modal-p">
                    <h2 style="text-align: center;">错误信息</h2>
                    <p class="modal-error-mess">此处将显示弹出框的错误提示信息</p>
                    <div class="modal-p">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!-- /.modal -->
<script type="text/javascript" src="js/modalTip.js"></script>

</html>